<template>
  <div class="register-wrapper">
    <div class="register-box">
      <!-- 头像 -->
      <div class="register-avatar">
        <img src="@/assets/logo.png" alt />
      </div>

      <!-- 注册表单 -->
      <el-form
        class="register-form"
        ref="registerFormRef"
        :model="registerForm"
        :rules="registerFormRules"
      >
        <h3 class="title">学生注册</h3>
        <!-- 年级选择 -->
        <el-form-item prop="grade">
          <el-select v-model="registerForm.grade" placeholder="请选择年级" @change="handleSelectChange" style="width: 100%">
            <el-option
              v-for="item in registerForm.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 申请学号按钮 -->
        <el-form-item>
          <el-button type="primary" @click="createStuNo" :disabled="!registerForm.grade">申请学号</el-button>
        </el-form-item>
        <!-- 学号 -->
        <el-form-item prop="studentNo">
          <el-input
            v-model="registerForm.studentNo"
            placeholder="请先申请学号"
            prefix-icon="iconfont iconicon"
            disabled
          ></el-input>
        </el-form-item>
        <!-- 真实姓名 -->
        <el-form-item prop="realname">
          <el-input
            v-model="registerForm.realname"
            placeholder="请输入真实姓名"
            prefix-icon="iconfont iconuser"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="registerForm.password"
            placeholder="请输入密码"
            prefix-icon="iconfont iconmima"
            type="password"
          ></el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item prop="confirmPassword">
          <el-input
            v-model="registerForm.confirmPassword"
            placeholder="请确认密码"
            prefix-icon="iconfont iconmima"
            type="password"
          ></el-input>
        </el-form-item>
        <!-- 电话 -->
        <el-form-item prop="telephone">
          <el-input
            v-model="registerForm.telephone"
            placeholder="请输入联系电话"
            prefix-icon="iconfont iconphone"
          ></el-input>
        </el-form-item>
        <!-- 地址 -->
        <el-form-item prop="address">
          <el-input
            v-model="registerForm.address"
            placeholder="请输入家庭住址"
            prefix-icon="iconfont iconlocation"
          ></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item prop="email">
          <el-input
            v-model="registerForm.email"
            placeholder="请输入邮箱"
            prefix-icon="iconfont iconemail"
          ></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="button">
          <el-button type="primary" @click="register">注册</el-button>
          <el-button type="info" @click="backToLogin">返回登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerForm.password !== "") {
          this.$refs.registerFormRef.validateField("confirmPassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      registerForm: {
        studentNo: "",
        password: "",
        confirmPassword: "",
        realname: "",
        telephone: "",
        address: "",
        email: "",
        options: [
          {
            value: "01",
            label: "大一",
          },
          {
            value: "02",
            label: "大二",
          },
          {
            value: "03",
            label: "大三",
          },
          {
            value: "04",
            label: "大四",
          },
        ],
        grade: "",
        gradeName: "",
      },

      registerFormRules: {
        grade: [
          { required: true, message: "请选择年级", trigger: "change" }
        ],
        studentNo: [
          { required: true, message: "请先申请学号", trigger: "blur" }
        ],
        realname: [
          { required: true, message: "请输入真实姓名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" }
        ],
        telephone: [
          { required: true, message: "请输入联系电话", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入家庭住址", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" }
        ]
      },
    };
  },

  methods: {
    // 得到对应选中的年级
    handleSelectChange(v) {
      this.registerForm.options.map((k) => {
        if (k.value === v) {
          this.registerForm.gradeName = k.label;
          return;
        }
      });
    },

    backToLogin() {
      // 使用Vue Router返回登录页
      this.$router.push('/student/login');
    },

    // 创建学号按钮响应，返回学号并填充到学号栏
    createStuNo() {
      // 把年级对应的编号this.registerForm.grade带过去
      this.$axios
        .post(
          "http://localhost:8080/student/createno/" + this.registerForm.grade,
          {}
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.registerForm.studentNo = res.data.message;
            this.$message.success("申请学号成功，请牢记您的学号：" + this.registerForm.studentNo);
          }
        })
        .catch((error) => {
          const errorMsg = error.response && error.response.data && error.response.data.message 
            ? error.response.data.message 
            : "申请学号失败";
          this.$message.error(errorMsg);
        });
    },

    // 注册按钮方法
    register() {
      // 进行表单预验证
      this.$refs.registerFormRef.validate((valid) => {
        if (!valid) return;
        // 进行注册， 携带填写的注册信息给后台
        this.$axios
          .post("http://localhost:8080/student/register", {
            studentNo: this.registerForm.studentNo, // 使用学号作为登录账号
            username: this.registerForm.studentNo, // 用户名也使用学号
            password: this.registerForm.password,
            realname: this.registerForm.realname,
            grade: this.registerForm.gradeName,
            address: this.registerForm.address,
            telephone: this.registerForm.telephone,
            email: this.registerForm.email
          })
          .then((res) => {
            // 注册成功
            if (res.data.code == 0) {
              this.$message.success("注册成功，请使用学号登录");
              this.$router.push('/student/login');
            } else {
              this.$message.error(res.data.message);
            }
          })
          .catch((error) => {
            const errorMsg = error.response && error.response.data && error.response.data.message 
              ? error.response.data.message 
              : "注册失败";
            this.$message.error(errorMsg);
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.register-wrapper {
  background: url('../images/studentbg.png') no-repeat center center;
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
  }
}

.register-box {
  width: 500px;
  min-height: 600px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  position: relative;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  z-index: 1;
  padding: 20px;
  box-sizing: border-box;
}

.register-avatar {
  height: 100px;
  width: 100px;
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 2;
  
  img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: #f5f5f5;
  }
}

.register-form {
  margin-top: 60px;
  padding: 0 20px;
}

.title {
  color: #333;
  text-align: center;
  margin: 0 0 30px;
  font-size: 24px;
  font-weight: 600;
}

.el-form-item {
  margin-bottom: 20px;
  
  .el-input {
    .el-input__inner {
      height: 40px;
      line-height: 40px;
      border-radius: 4px;
      padding-left: 40px;
      font-size: 14px;
      
      &:focus {
        border-color: #409EFF;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
      }
    }
    
    .el-input__prefix {
      left: 12px;
      font-size: 16px;
    }
  }
}

.el-select {
  width: 100%;
  
  .el-input__inner {
    height: 40px;
    line-height: 40px;
  }
}

.button {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  
  .el-button {
    width: 45%;
    height: 40px;
    font-size: 16px;
  }
}

// 申请学号按钮样式
.el-form-item:has(.el-button) {
  margin-bottom: 10px;
  
  .el-button {
    width: 100%;
    height: 40px;
  }
}

// 禁用状态的输入框样式
.el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}
</style>
